<nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-row nzGutter="8">
            <nz-col nzSm="24">
                <nz-form-item>
                    <nz-form-control>
                        <nz-input-group nzSearch [nzAddOnAfter]="suffixSearchButton">
                            <input type="text" nz-input [(ngModel)]="filterText" name="filterText" placeholder="{{'SearchWithThreeDot' | localize}}">
                            <ng-template #suffixSearchButton>
                                <button nz-button nzType="primary" nzSearch (click)="onSearch($event)">
                                    <i nz-icon type="search"></i>
                                </button>
                            </ng-template>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
        <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
            <nz-col nzSm="12">
                <nz-form-item>
                    <nz-form-control>
                        <permission-combo [multiple]="false" [dropDownStyle]="{'max-height':'300px'}"
                            [(selectedPermission)]="selectedPermission" (selectedPermissionChange)="refresh()">
                        </permission-combo>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzSm="12">
                <nz-form-item>
                    <nz-form-control>
                        <role-combo [(selectedRole)]="role" (selectedRoleChange)="refresh()"></role-combo>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
        <nz-row nzGutter="8" *ngIf="advancedFiltersVisible">
            <nz-col nzSm="12">
                <nz-form-item>
                    <nz-form-control>
                        <label nz-checkbox name="OnlyLockedUsers" [(ngModel)]="onlyLockedUsers" (ngModelChange)="refresh()">{{"OnlyLockedUsers" | localize}}</label>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
    </form>
    <nz-row nzGutter="8">
        <nz-col nzMd="20" nzSm="12">
            <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Administration.Users.Create')" (click)="createOrEdit()">
                <i nz-icon type="plus"></i>
                <span>
                    {{"CreateNewUser" | localize}}
                </span>
            </button>
            <ng-container *ngIf="selectedDataItems.length > 0">
                <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.Administration.Users.Delete')" (click)="batchDelete()">
                    <i nz-icon type="delete"></i>
                    <span>
                        删除所选
                    </span>
                </button>
            </ng-container>
            <button nz-button nzType="default" (click)="exportToExcel()">
                <i nz-icon type="file-excel"></i>
                <span>
                    {{"ExportToExcel" | localize}}
                </span>
            </button>
        </nz-col>
        <nz-col nzMd="4" nzSm="12" class="text-right">
            <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
                {{(advancedFiltersVisible ? 'HideAdvancedFilters' : 'ShowAdvancedFilters') | localize}}
                <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
            </a>
        </nz-col>
    </nz-row>
    <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
            <ng-template #message>
                <span>
                    已选择<strong class="text-primary">{{selectedDataItems.length}}</strong> 项
                </span>
                <a (click)="restCheckStatus(dataList)" class="ml-md" *ngIf="selectedDataItems.length>0">
                    {{'Clear' | localize}}
                </a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="refresh()">
                    {{'Refresh' | localize}}
                </a>
            </ng-template>
        </nz-alert>
    </div>
    <nz-row class="my-md">
        <nz-table #ajaxTable [nzData]="dataList" [nzTotal]="totalItems" [(nzPageIndex)]="pageNumber" [(nzPageSize)]="pageSize"
            [nzLoading]="isTableLoading" (nzPageIndexChange)="pageNumberChange()" (nzPageSizeChange)="refresh()"
            [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzNoResult]="noDataTemplate" [nzShowTotal]="totalTemplate"
            [nzFrontPagination]="false" [nzScroll]="{x: totalItems>0?'1500px':'auto'}">
            <ng-template #noDataTemplate>
                <no-data></no-data>
            </ng-template>
            <ng-template #totalTemplate let-total>
                {{'TotalRecordsCount' | localize:total}}
            </ng-template>
            <thead (nzSortChange)="gridSort($event)">
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
                        (nzCheckedChange)="checkAll($event)" nzWidth="60px" nzLeft="0px"></th>

                    <th nzShowSort nzSortKey="userName">
                        {{'UserName' | localize}}
                    </th>
                    <th>
                        {{'Name' | localize}}
                    </th>
                    <th>
                        {{'Surname' | localize}}
                    </th>
                    <th>
                        {{'Roles' | localize}}
                    </th>

                    <th nzShowSort nzSortKey="emailAddress">
                        {{'EmailAddress' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="isEmailConfirmed" class="text-center">
                        {{'EmailConfirm' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="isActive" class="text-center">
                        {{'Active' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="creationTime" class="text-center">
                        {{'CreationTime' | localize}}
                    </th>
                    <th nzWidth="240px" nzRight="0px" class="text-center">
                        {{'Actions' | localize}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of ajaxTable.data">
                    <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"
                        nzLeft="0px"></td>
                    <td>
                        {{item.userName}}
                    </td>
                    <td>
                        {{item.name}}
                    </td>
                    <td>
                        {{item.surname}}
                    </td>
                    <td>
                        <span nz-tooltip [nzTitle]="getRolesAsString(item.roles)">
                            <nz-tag *ngFor="let role of item.roles">
                                {{role.roleName}}
                            </nz-tag>
                        </span>
                    </td>
                    <td>
                        {{item.emailAddress}}
                    </td>
                    <td class="text-center">
                        <span class="badge badge-success" *ngIf="item.isEmailConfirmed">{{'Yes' | localize}}</span>
                        <span class="badge badge-error" *ngIf="!item.isEmailConfirmed">{{'No' | localize}}</span>
                    </td>
                    <td class="text-center">
                        <span class="badge badge-success" *ngIf="item.isActive">{{'Yes' | localize}}</span>
                        <span class="badge badge-error" *ngIf="!item.isActive">{{'No' | localize}}</span>
                    </td>
                    <td class="text-center">
                        {{item.creationTime | momentFormat:'L'}}
                    </td>
                    <td nzRight="0px" class="text-center">
                        <ng-container *ngIf="isGranted('Pages.Administration.Users.Edit')">
                            <a (click)="createOrEdit(item.id)">
                                <i nz-icon type="edit"></i>
                                {{'Edit' | localize}}
                            </a>
                            <nz-divider nzType="vertical"></nz-divider>
                        </ng-container>
                        <ng-container *ngIf="isGranted('Pages.Administration.Users.Delete')">
                            <nz-popconfirm [nzTitle]="l('UserDeleteWarningMessage', item.userName)" (nzOnConfirm)="deleteUser(item)"
                                [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                                <a nz-popconfirm>
                                    <i nz-icon type="delete"></i>
                                    {{'Delete' | localize}}
                                </a>
                            </nz-popconfirm>
                        </ng-container>
                        <ng-container *ngIf="isGrantedAny('Pages.Administration.Users.Impersonation', 'Pages.Administration.Users.ChangePermissions', 'Pages.Administration.Users.Unlock')">
                            <nz-divider nzType="vertical"></nz-divider>
                            <nz-dropdown>
                                <a nz-dropdown>
                                    {{'More' | localize}}
                                    <i nz-icon type="down"></i>
                                </a>
                                <ul nz-menu>

                                    <li nz-menu-item *ngIf="isGranted('Pages.Administration.Users.Edit')" (click)="editUserPermissions(item) ">
                                        <i nz-icon type="safety"></i>
                                        {{'Permissions' | localize}}
                                    </li>
                                    <li nz-menu-item *ngIf="isGranted('Pages.Administration.Users.Edit') " (click)="unlockUser(item) ">
                                        <i nz-icon type="unlock"></i>
                                        {{'Unlock' | localize}}
                                    </li>

                                </ul>
                            </nz-dropdown>
                        </ng-container>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </nz-row>
</nz-card>
